<template>
  <router-view v-if="isLoginPage"></router-view>
  <el-container v-else>
    <el-aside width="180px" style="overflow: hidden">
      <sidebar />
    </el-aside>
    <el-container>
      <el-header style="padding: 0">
        <navbar></navbar>
      </el-header>
      <el-main>
        <div style="background: #FFF">
          <router-view style="padding: 16px; min-height: calc(100vh - 134px)"></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import sidebar from '@/components/sidebar';
import navbar from '@/components/navbar';
import { mapMutations } from 'vuex';

export default {
  components: {
    sidebar,
    navbar,
  },
  computed: {
    isLoginPage() {
      return this.$route.name === 'login';
    },
  },
  methods: {
    ...mapMutations('client', {
      setClientHeight: 'SET_CLIENTHEIGHT',
    }),
  },

  mounted() {
    let timer = null;
    const { clientHeight } = document.documentElement;
    this.setClientHeight(clientHeight);
    window.onresize = () => {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        const { clientHeight } = document.documentElement;
        this.setClientHeight(clientHeight);
      }, 200);
    };
  },

};
</script>
